<template>
  <div class="page">
    <div class="container">
      <pub-search
        v-model:searchColumns="state.searchColumns"
        v-model:searchForm="state.searchForm"
        mask-append-to="table-container"
        @search="initPage"
      >
        <template #leftBtn>
          <el-button
            class="btn-table-add"
            :icon="Plus"
            type="primary"
            @click="add"
          >
            新增
          </el-button>
        </template>
      </pub-search>
      <div class="table-web table-container">
        <el-table
          v-loading="tableLoading"
          :data="state.tableData"
          style="width: 100%"
          height="100%"
          row-key="id"
          border
          :header-cell-style="{
            background: '#F4F9FF',
            color: '#087CD6',
            fontSize:'14px'
          }"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="name" label="菜单名称" width="300"  show-overflow-tooltip>
            <template v-slot="scope">
              <div style="font-size: 12px; display: inline-block">
                <span>{{ scope.row.name }}</span>
                <span v-if="scope.row.pid == 0">
                  【{{ formatDictCode('PT', scope.row.platform) }}】
                </span>
              </div>
              <!-- <div v-else>-</div> -->
            </template>
          </el-table-column>
          <!-- <el-table-column prop="platform" label="平台" /> -->
          <!-- <el-table-column align="center" prop="platform" label="平台">
            <template v-slot="scope">
              <div style="font-size: 12px" v-if="scope.row.pid == 0">
                {{ formatDictCode('PT', scope.row.platform) }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column> -->
          <el-table-column prop="code" label="菜单代码"  show-overflow-tooltip />
          <el-table-column prop="jump" label="路径"  show-overflow-tooltip />
          <el-table-column prop="type" label="类型" :formatter="formatType"  show-overflow-tooltip />
          <el-table-column
            width="80px"
            align="left"
            prop="status"
            label="状态"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <el-switch
                :model-value="scope.row && scope.row.status > 0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeResourceStatus($event, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="250px"
            align="center"
            header-align="center"
            fixed="right"
          >
            <template v-slot="scope">
              <!-- {{scope}} -->
              <el-button
                v-if="scope.row.type == 1 || scope.row.type == 2"
                type="primary"
                plain
                class="btn-row-add"
                @click="addChildren(scope.row)"
              >
                添加子菜单
              </el-button>
              <el-button
                type="success"
                plain
                class="btn-row-edit"
                @click="edit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                class="btn-row-del"
                type="danger"
                plain
                @click="del(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pub-dialog
        v-if="editShow"
        title="编辑菜单"
        @close="close"
        v-model:visible="editShow"
        width="1000px"
      >
        <editDialog
          :default-form="state.defaultForm"
          :edit-type="editType"
          @success="handleSuccess"
          @cancel="handleCancel"
        />
      </pub-dialog>
      <pub-dialog
        v-if="detailDialog"
        title="添加菜单"
        @close="close"
        v-model:visible="detailDialog"
        width="1000px"
      >
        <addDialog
          @cancel="handleCancel"
          @success="handleSuccess"
          :lastMenusPath="lastMenusPath"
          :idAddChild="idAddChild"
          :currentIndex="currentIndex"
          :currentPid="currentPid"
        />
      </pub-dialog>
    </div>
  </div>
</template>

<script setup>
import { formatDictCode } from '@/utils/format.js'
import {
  getMenusList,
  changeResourceStatusApi,
  delResource
} from '@/api/system'
import { ref, reactive, toRefs } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
import editDialog from './components/edit.vue'
import addDialog from './components/add.vue'
import { useUserStore } from '@/pinia/modules/user'
// data
const tableLoading = ref(false)
const state = reactive({
  searchColumns: [
    {
      label: '菜单名称',
      el: 'Input',
      bind: 'name',
      defaultValue: '',
      labelWidth: 80
    },
    {
      label: '菜单代码',
      el: 'Input',
      bind: 'code',
      defaultValue: '',
      labelWidth: 80
    }
  ],
  tableData: [],
  defaultForm: {
    pid: '',
    id: ''
  },
  searchForm: {

  }
})
const userStore = useUserStore()
const userAreaArr = userStore.userAreaArr
const orgInfo = userStore.orgInfo
const editShow = ref(false)
const editType = ref('add')
const detailDialog = ref(false)
const idAddChild = ref(false)
const currentPid = ref('')
const lastMenusPath = ref('')
const currentIndex = ref(0)

// 方法
const initPage = async () => {
  tableLoading.value = true
  await getMenusList(state.searchForm).then(res => {
    if (res.succeed) {
      state.tableData = res.data
    }
    tableLoading.value = false
  })
}

const changeResourceStatus = (val, item) => {
  ElMessageBox.confirm('确认删除选择的记录?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      const params = {
        id: item.id,
        status: val ? 1 : 0
      }
      changeResourceStatusApi(params).then(res => {
        initPage()
      })
    })
    .catch(() => {
      tableLoading.value = false
    })
}
const formatType = row => {
  if (row.type === 1) {
    return '目录'
  }
  if (row.type === 2) {
    return '页面'
  }
  return '按钮'
}
const formatStatus = row => {
  if (row.status === 1) {
    return '启用'
  }
  return '停用'
}
const add = () => {
  // 新增菜单
  idAddChild.value = false
  detailDialog.value = true
}
const addChildren = item => {
  // 添加子菜单
  idAddChild.value = true
  currentPid.value = item.id
  lastMenusPath.value = item.jump
  currentIndex.value = item.children.length + 1
  detailDialog.value = true
}
const edit = item => {
  editType.value = 'edit'
  state.defaultForm.id = item.id
  editShow.value = true
}
const del = item => {
  ElMessageBox.confirm('确认删除选择的记录？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    confirmButtonClass: 'btn-row-edit',
    cancelButtonClass: 'btn-row-close',
    type: 'warning'
  })
    .then(() => {
      tableLoading.value = true
      delResource(item.id).then(res => {
        if (res.succeed) {
          ElMessage.success('删除成功')
          initPage()
        }
        tableLoading.value = false
      })
    })
    .catch(() => {
      tableLoading.value = false
    })
}
const handleSuccess = () => {
  initPage()
  editShow.value = false
  detailDialog.value = false
}
const close = () => {
  editShow.value = false
  detailDialog.value = false
}

const handleCancel = () => {
  editShow.value = false
  detailDialog.value = false
}
const normalAreaChange = val => {
  console.log(val)
}

initPage()
</script>
<style lang="scss" scoped>
.table-web {
  font-family: 'Microsoft YaHei';
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 0px !important;
  }
  :deep(.el-button) {
    border: 0 solid transparent !important;
    background-color: transparent !important;
    font-size: 14px !important;
    padding: 6px 0px !important;
    font-family: 'Microsoft YaHei';
  }
  :deep(.el-button + .el-button) {
    margin-left: 19px !important;
  }
  :deep(.el-button--success) {
    // color: var(--el-color-success) !important;
    // &:hover {
    //   color: var(--el-color-success) !important;
    // }

    color: #087cd6 !important;
    &:hover {
      color: #087cd6 !important;
    }
  }
  :deep(.el-button--primary) {
    color: #087cd6 !important;
    &:hover {
      color: #087cd6 !important;
    }
  }
  :deep(.el-button--danger) {
    // color: var(--el-color-danger) !important;
    // &:hover {
    //   color: var(--el-color-danger) !important;
    // }
    color: #087cd6 !important;
    &:hover {
      color: #087cd6 !important;
    }
  }
}
</style>
